<!-- 采购商品列表 -->
<template>
  <div v-if="ctgId">
    <el-table v-if="ctgId" style="width: 99%;" :data="dataList" border v-loading="dataListLoading" show-summary :summary-method="getSummaries" @selection-change="handleSelectionChange">
      <el-table-column key="1" type="selection"width="55"></el-table-column>
      <el-table-column key="2" prop="code" label="商品代码" width="170">
        <template slot-scope="scope">
          <i class="el-icon-circle-plus-outline" style="color: #409eff;font-size: 18px;" @click="addNewGoods(scope.row,scope.$index)"></i>{{scope.row.code}}
        </template>
      </el-table-column>
      <el-table-column key="3" prop="name" label="商品名称"></el-table-column>
      <el-table-column key="4" prop="spec" label="型号" v-if="ctgId != 3 && ctgId != 4"></el-table-column>
      <el-table-column key="5" prop="mirrorBall" label="老花镜度数" v-if="ctgId == 8"></el-table-column>
      <el-table-column key="6" prop="color" label="色号" v-if="[1,6,8].includes(ctgId)"></el-table-column>
      <el-table-column key="7" prop="frameMaterial" label="框架材质" v-if="ctgId == 1"></el-table-column>
      <el-table-column key="8" prop="goodsSize" label="框架尺寸" v-if="[1,6,8].includes(ctgId)"></el-table-column>
      <el-table-column key="9" prop="mirrorBall" label="球镜" width="50" v-if="[3,4].includes(ctgId)"></el-table-column>
      <el-table-column key="10" prop="columnMirror" label="柱镜" width="50" v-if="[3,4].includes(ctgId)"></el-table-column>
      <el-table-column key="11" prop="toTheLight" label="下加光" width="60" v-if="ctgId == 3"></el-table-column>
      <el-table-column key="12" prop="refractiveIndex" label="折射率" width="60" v-if="ctgId == 3"></el-table-column>
      <el-table-column key="13" prop="primaryCapacity" label="主容量" v-if="ctgId == 5"></el-table-column>
      <el-table-column key="14" prop="secondaryCapacity" label="次容量" v-if="ctgId == 5"></el-table-column>
      <el-table-column key="15" prop="manufacturer" label="生产厂家">
        <template slot-scope="scope">
          <el-input v-model="scope.row.manufacturerName" size="mini" style="width: 120px;" :ref="'validityA'+scope.$index" @keyup.enter.native="validityChange(scope.$index,'A')"></el-input>
        </template>
      </el-table-column>
      <el-table-column key="16" prop="productionDate" label="生产日期">
        <template slot-scope="scope">
          <el-input v-model="scope.row.productionDate" size="mini" style="width: 120px;" :ref="'validityB'+scope.$index" @keyup.enter.native="validityChange(scope.$index,'B')"></el-input>
        </template>
      </el-table-column>
      <el-table-column key="17" label="效期" v-if="[4,5].includes(ctgId)">
      	<template slot-scope="scope">
          <el-input v-model="scope.row.invalidTimeStr" size="mini" style="width: 120px;" :ref="'validityC'+scope.$index" @change="invalidTimeChange(scope.row,scope.$index)" @keyup.enter.native="validityChange(scope.$index,'C')"></el-input>
      	</template>
      </el-table-column>
      <el-table-column key="18" label="批号" width="120" v-if="[4,5].includes(ctgId)">
      	<template slot-scope="scope">
      		<el-input size="mini" v-model="scope.row.batch" :ref="'validityD'+scope.$index" @keyup.enter.native="validityChange(scope.$index,'D')"></el-input>
      	</template>
      </el-table-column>
      <el-table-column key="19" label="注册证号" v-if="[4,5].includes(ctgId)">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.registerNum" :ref="'validityE'+scope.$index" @keyup.enter.native="validityChange(scope.$index,'E')"></el-input>
        </template>
      </el-table-column>
      <el-table-column key="20" label="商品条码" width="251" v-if="[4,5].includes(ctgId)">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.goodsBarcode" readonly></el-input>
        </template>
      </el-table-column>
      <el-table-column key="21" prop="goodsBarcode" width="251" label="商品条码" v-if="ctgId != 4 && ctgId != 5"></el-table-column>
      <el-table-column key="22" prop="quantity" label="数量" width="80">
        <template slot-scope="scope">
          <el-input v-model="scope.row.quantity" :ref="'number'+scope.$index" @input="quantityChangeHangle" @keyup.enter.native="enterChange(scope.$index)" :disabled="type == 'detail'"></el-input>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import { checkDate } from '@/util/tools'
  import { getNowTime } from '@/api/eims/sale'
  export default {
    props:['ctgId','dataList','dataListLoading','selectList','type'],
    computed:{},
    methods:{
      // 获取当前时间
      async getNowDateStr(){
        let nowDateStr = ''
        await getNowTime().then(result => {
          nowDateStr = result.data.data
        })
        return nowDateStr
      },
      handleSelectionChange(val) {
        this.$emit('refreshData',val)
      },
      //  效期改变事件
      invalidTimeChange(data,index){
        this.getNowDateStr().then(result => {
          let reg = /^((?:19|20|21|22)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/
          let reg2 = /^((?:19|20|21|22)\d\d)-(0[1-9]|1[012])$/
          if(checkDate(data.invalidTimeStr) && reg.test(data.invalidTimeStr)){
            if(new Date(data.invalidTimeStr).getTime() > new Date(result).getTime()){
              let goodsId = data.id
              this.dataList.forEach((item,index) => {
                if(item.id == data.id){
                  let goodsBarcode = item.code.replace(/[\ |\.]/g,"") + ((item.invalidTimeStr ) ? (item.invalidTimeStr.replace(/[\ |\-]/g,"")).substring(2,10) : '00000000') + 'A0'
                  this.$set(this.dataList[index],'goodsBarcode',goodsBarcode)


                  // item.goodsBarcode = item.code.replace(/[\ |\.]/g,"") + ((item.invalidTimeStr ) ? (item.invalidTimeStr.replace(/[\ |\-]/g,"")).substring(2,10) : '00000000') + 'A0'
                }
              })
            }else{
              data.invalidTimeStr = ''
              this.$message.warning('效期不可小于当前日期')
            }
          }else if(reg2.test(data.invalidTimeStr)){
            let nowMonth = result.substring(0,7)
            if(new Date(data.invalidTimeStr).getTime() > new Date(nowMonth).getTime()){
              let goodsId = data.id
              this.dataList.forEach((item,index) => {
                if(item.id == data.id){
                  // item.goodsBarcode = item.code.replace(/[\ |\.]/g,"") + ((item.invalidTimeStr ) ? (item.invalidTimeStr .replace(/[\ |\-]/g,"")).substring(2,10) : '00000000') + 'A0'
                  let goodsBarcode = item.code.replace(/[\ |\.]/g,"") + ((item.invalidTimeStr ) ? (item.invalidTimeStr.replace(/[\ |\-]/g,"")).substring(2,10) : '00000000') + 'A0'
                  this.$set(this.dataList[index],'goodsBarcode',goodsBarcode)
                }
              })
            }else{
              data.invalidTimeStr = ''
              this.$message.warning('效期不可小于当前日期')
            }
          }else{
            data.invalidTimeStr = ''
            this.$message.error('请填写正确日期格式 2020-01-01 或 2020-01')
            return false
          }
        })

      },
      //  回车切换下一行商品数量
      enterChange(index){
        if(this.$refs['number'+(index*1 + 1)]){
          this.$refs['number'+(index*1 + 1)].focus()
        }
      },
      quantityChangeHangle(val) {
        const reg = /^[1-9]\d*?$/
        this.dataList.forEach((item,index) => {
          if(!reg.test(item.quantity)){
						this.$set(item,'quantity','')
          }else{
            // this.$set(item,'quantity',val)
          }
        })
      },
      validityChange(index,item){
        if(this.ctgId == '4' || this.ctgId == '5'){
          if(item == 'A'){
            this.$refs['validityB' + index].focus()
          }else if(item == 'B'){
            this.$refs['validityC' + index].focus()
          }else if(item == 'C'){
            this.$refs['validityD' + index].focus()
          }else if(item == 'D'){
            this.$refs['validityE' + index].focus()
          }else if(item == 'E'){
            if(this.$refs['validityA'+(index*1 + 1)]){
              this.$refs['validityA'+(index*1 + 1)].focus()
            }
          }
        }else{
          if(item == 'A'){
            this.$refs['validityB' + index].focus()
          }else if(item == 'B'){
            if(this.$refs['validityA'+(index*1 + 1)]){
              this.$refs['validityA'+(index*1 + 1)].focus()
            }
          }
        }
      },
      // 添加一个新商品
      addNewGoods(row,index){
        let idx = index*1 + 1
        row = JSON.parse(JSON.stringify(row))
        this.dataList.splice(idx,0,row);
        this.dataList = [...this.dataList]
      },
      //  合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            let zIndex = ''
            if([1,3,8].includes(this.ctgId)){
              zIndex = 10
            }else if([2,7,9].includes(this.ctgId)){
              zIndex = 7
            }else if(this.ctgId == 4){
              zIndex = 11
            }else if(this.ctgId == 5){
              zIndex = 12
            }else if(this.ctgId == 6){
              zIndex = 9
            }
            if(index == zIndex){
              sums[index] = '合计： ' + values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0)
            }

          }
        });
        return sums;
      }
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-table {
  display: flex;
  flex-direction: column;
  }

  /deep/ .el-table__body-wrapper {
  order: 1;
  }
</style>
